<template>
    <div class="orders">
    <!-- form -->
    <el-table :data="tableData" border style="width: 100%" >
      <el-table-column prop="orderDetail" align="center" label="产品图片" width="130">
					<!-- 插槽作用域 -->
					<template v-slot="scope">
						<el-avatar shape="square" style="width:60px; height:20px;" fit="scale-down" :src="scope.row.orderDetail[0].imageUrl">
						</el-avatar>
					</template>
      </el-table-column>
      <el-table-column align="center" prop="order_id" label="订单编号" width="200"> </el-table-column>
      <el-table-column align="center" prop="orderDetail[0].productName" label="产品名称" width="100"></el-table-column>
      <el-table-column  align="center" prop="orderDetail[0].quantity" label="数量" width="50"> </el-table-column>
      <el-table-column align="center" prop="total_fee" label="总价格" width="100"></el-table-column>
      <el-table-column align="center" prop="create_time" label="创建时间" width="200"> </el-table-column>
      <el-table-column align="center" prop="pay_status" label="支付状态" width="100">
        <template v-slot="{ row }">
						{{ row.pay_status === 1 ? "已支付" : "未支付" }}
					</template>
      </el-table-column>
      
      <el-table-column align="center" prop="order_status" label="订单状态" width="100">
        <template v-slot="{ row }">
						<span v-if="row.order_status == 0">未提交</span>
						<span v-else-if="row.order_status == 1">提交成功</span>
						<span v-else-if="row.order_status == 2">已经取消</span>
						<span v-else-if="row.order_status == 3">无效订单</span>
						<span v-else-if="row.order_status == 4">交易关闭</span>
						<span v-else-if="row.order_status == 5">退货</span>
					</template>
      </el-table-column>

      
   <el-table-column align="center" prop="opration"  style="width:200px" label="操作">
					<template v-slot="{ row }">
						<el-button type="primary" v-hasPay="[row.pay_status, row.order_status]"
							icon="iconfont icon-chongzhi" size="small"> 去支付 </el-button>
						<el-button type="danger" icon="el-icon-delete" size="small"> 删除 </el-button>
					</template>
				</el-table-column>

    </el-table>
    </div>
</template>

<script>
import * as api  from "@/api/tarnsaction"
  export default {
    data() {
      return {
        tableData: [],
        orderDetail:""
      }
    },
    meta:{
      title: 'order',
      name:"订单管理",
      icon:"iconfont icon-dd"
    },
    created(){
      api.getOrders()
      .then(res =>{
        console.log(res)
        this.tableData=res.data.data
      })
    },
    directives:{
      hasPay:{
        inserted(el,binding){
        // console.log(binding)
        // console.log(el)
        //指令接收的是用户的支付状态
				//0未支付 显示去支付按钮
				//1已支付 禁用去支付按钮
				//接收到的参数是一个数组 [pay_status,order_status]
          let [pay_status,order_status]=binding.value;
          let className=el.className;
        //当pay_status不是0 的时候
				//order_status不是1的时候
				//禁用按钮
				//order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
          if(pay_status !==0 || order_status !==1){
            el.disabled=true;//禁用按钮
            el.className=className + "" +"is-disabled";//is-disabled 禁用elementui 的样式
          }
        }
      }
    }
  }
</script>